import styles from './index.module.less'
import logo from '../../assets/1.png'
import { Button, Input, Form } from 'react-vant'
import axios from '../../api'//引入已经配置好的axios
import toast from 'react-hot-toast';
import { useNavigate, useLocation } from 'react-router-dom';//用于跳页面
export default function Login() {
  const [form] = Form.useForm()
  const navigate = useNavigate()
  const { state } = useLocation()//从注册页面传过来的参数
  const onFinish = values => {
    //'/user/login'表示url参数
    // （因为在axios.defaults.baseURL='http://localhost:3000'中已经设置了基础URL，所以这里只需要写相对路径），
    // values表示请求体（Request Body）
    axios.post('/user/login', values).then(res => {
      toast.success('登录成功')
      navigate('/noteClass')
      localStorage.setItem('access_token', res.access_token)//登录成功后，将令牌(token)存储到浏览器本地
      localStorage.setItem('refresh_token', res.refresh_token)//登录成功后，将令牌(token)存储到浏览器本地
      localStorage.setItem('userInfo', JSON.stringify(res.data))//登录成功后，将用户信息存储到浏览器本地
    }).catch(err => {
      console.log(err)
    })
  }
  return (
    <div className={styles.login}>
      <h1 className={styles.title}>登录</h1>
      <div className={styles['login-wrapper']}>
        <div className={styles.avatar}>
          <img className={styles['avatar-img']} src={logo} alt="logo" />
        </div>
        <Form
          form={form}
          onFinish={onFinish}//form表单的提交事件
          footer={
            <div style={{
              margin: '16px 16px 0',
              '--rv-button-primary-background-color': ' pink',
              '--rv-button-primary-border-color': 'pink'
            }}>
              <Button round nativeType='submit' type='primary' block>
                登录
              </Button>
            </div>
          }
        >
          <Form.Item
            labelWidth={50}
            rules={[{ required: true, message: '请填写用户名' }]}
            name='username'
            label='用户名'
            initialValue={state?.username}//设置默认初始值
          >
            <Input placeholder='请输入用户名' />
          </Form.Item>
          <Form.Item
            labelWidth={50}
            rules={[{ required: true, message: '请填写密码' }]}
            name='password'
            label='密码'
            initialValue={state?.password}//设置默认初始值
          >
            <Input placeholder='请输入密码' />
          </Form.Item>
        </Form>
      </div>
      <p className={styles['login-tip']}
        onClick={() => {
          navigate('/register')
        }}
      >
        没有账号?点这里注册
      </p>
    </div>
  )
}
